<template>
	<view class="block">
		<view class="" style="padding-bottom: 150rpx;">
			<u-sticky>
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in navList" :key="index">
						<view :class="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="">
				<view class="margin_top mainpadding ffffff" v-for="item in list.data" :key="item.id" @click="tzckxq(item.id)">
					<view class="flexleft">
						<image class="margin_right1 xiaotux" :src="item.user.avatar_text" mode=""></image>
						<view class="">
							<view class="ershiba xiaohei">{{item.user.nickname}}</view>
							<view class="smalltext xiaohui margin_top1">{{item.createtime_text}}</view>
						</view>
					</view>
					<view class="flexleft margin_top" v-if="item.qwdx">
						<u-icon name="heart-fill" color="#ff0000" size="20"></u-icon>
						<view class=" sanshier xiaohei">期望<text v-if="qingshaonian!=1">对象</text>：{{item.qwdx}}</view>
					</view>
					<view class="margin_top sanshier xiaohei">{{item.content}}</view>
					<view class="flexleft flex_wrap">
						<view class="sanshis flexcenter margin_top" v-for="(ite,index) in item.images_text" :key="index">
							<image class="dtbabb" :src="ite" mode=""></image>
						</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershiw flexcenter">
							<view class="flexleft">
								<view class="dticon">
									<image src="../static/image/system/s.png" mode=""></image>
								</view>
								<view class="smalltext xiaohei">{{item.zs_num}}</view>
							</view>
						</view>
						<view class="ershiw flexcenter">
							<view class="flexleft">
								<view class="dticon">
									<image src="../static/image/system/fx.png" mode=""></image>
								</view>
								<view class="smalltext xiaohei">{{item.share_num}}</view>
							</view>
						</view>
						<view class="ershiw flexcenter">
							<view class="flexleft">
								<view class="dticon">
									<image src="../static/image/system/xx.png" mode=""></image>
								</view>
								<view class="smalltext xiaohei">{{item.comment_num}}</view>
							</view>
						</view>
						<view class="ershiw flexcenter">
							<view class="flexleft">
								<view class="dticon">
									<image src="../static/image/system/dz.png" mode="" v-if="!item.is_dz"></image>
									<image src="../static/image/system/dzs.png" mode="" v-if="item.is_dz"></image>
								</view>
								<view class="smalltext xiaohei">{{item.dz_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>	
		<tabbardi ref="tabbardiref" :current="1"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				isActive: 0,
				navList: [{
					index: 0,
					title: "全部"
				},{
					index: 1,
					title: '关注'
				}, ],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				qingshaonian:1
			}         
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			this.qingshaonian = uni.getStorageSync("qingshaonian") || 0
			setTimeout(()=>{
				this.$refs.tabbardiref.noreadNum = 0
				this.$refs.tabbardiref.getnoreadNum()
			},100)
			this.init()
			
		},
		methods: {
			init(isPage, page) {
				let _this = this
				let url = "/api/userdtcl/dtIndex"
				let data = {
					page: page || 1,
					limit: _this.limit,
					type:this.isActive==0?2:1
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转详情
			tzckxq(id){
				uni.navigateTo({
					url:'/pages_fabu/dongtaixq?id='+id
				})
			},
			checked(index) {
				this.isActive = index
				this.list = {}
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xiaotux {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}
	.dtbabb {
		width: 224rpx;
		height: 224rpx;
	}
	.dticon {
		width: 32rpx;
		height: 32rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.tab_nav {
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}
	
	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}
	
	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}
	
	.active::after {
		content: "";
		position: absolute;
		width: 48rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #2361FF 0%, #FFFFFF 100%);
		background-size: 100% 100%;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
.block{
	background: #F9F9F9;
	min-height:calc(100vh - 100rpx);
	height: auto;
}
</style>
